<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 箭头函数是用来简洁化函数定义语法的 格式： () => {};  一般通过赋值声明
        const fn = () => {
            console.log('我是箭头函数');
        };
        fn();

        // 在箭头函数中，如果函数体中只有一句代码 并且代码的执行的结果就是函数的返回值 函数体大括号可以省略
        function fun(sum1, sum2) {
            return sum1 + sum2;
        };
        console.log(fun(10, 20));
        // 等价于 
        const sum = (sum1, sum2) => sum1 + sum2;  //  const sum = (sum1, sum2) => {sum1 + sum2};
        console.log(sum(10, 11));
        console.log('------------------');

        // 在箭头函数中 如果形参只有一个 形参的外侧的小括号也可以省略的
        const fn1 = (v) => {
            console.log(v);
        };
        // 等价于
        const fn2 = v => console.log(v);
        fn1(10);
        fn2(20);
        console.log('-------------');

        // 箭头函数不绑定this 箭头函数没有自己的this 关键字 如果在箭头函数中使用this this关键字指向箭头函数定义位置中的this
        function fnn() {
            console.log(this); // 此时this指向obj
            return () => {
                console.log(this); // 箭头函数没有this指向 则返回声明箭头函数定义位置中的this 也就是fnn函数
            }
        }

        const obj = { name: '刘德华' };
        const resFh = fnn.call(obj); // 调用函数并且更改fn this的指向 现在this指向obj
        resFh();
    </script>
</body>

</html>